<script setup>
import {
  defineComponent,
  reactive,
  toRefs,
  computed,
  onMounted,
  ref,
  nextTick,
} from "vue";
import { useStore } from "vuex";

import ColorPicker from "colorpicker-v3";
import "colorpicker-v3/style.css";
import {
  QuestionCircleOutlined,
  UploadOutlined,
  CloudUploadOutlined,
  CaretRightOutlined,
  CloseOutlined,
} from "@ant-design/icons-vue";

import { logo_urls_item } from '@/views/shotstack/MixedCutPlatforms/utools/template.js'

import ChooseMaterial from "@/views/shotstack/EditingCenter/modules/bottomSet/components/chooseMaterial.vue";

// logo 手机组件
import LogoPhone from './components/LogoPhone.vue'
const LogoPhoneRef = ref()
import { message } from "ant-design-vue";
// 封装的请求
import request from "@/common/utils/request";

import {isEmpty} from '@/common/utils/is.js'

  const state = reactive({
    visible: false, //控制页面显示隐藏
    addVisible: false, //控制素材库组件显示隐藏
    // 手机组件 显示隐藏
    phoneVisible: false,
    marks:{
      0: {
        style: {
          color: '#333',
        },
        label: '透明',
      },
      1: {
        style: {
          color: '#333',
        },
        label: '不透明',
      },
    }
  });


let logoData = ref([logo_urls_item()]); 
    // 仓库
    const store = useStore();

    // 选择文件组件回调
const cancel = (info) => {
  console.log(info, '选择的素材');
  if (isEmpty(info)) {
    state.addVisible = false;
    return
  }
  logoData.value[0].url = info.material_url;
  logoData.value[0].media_id = info?.oss_media_id || '';

  if (info?.width && info?.height) {    

        // 固定的宽高大小
        const num = 100

        let newWidth = Number(info?.width)??0
        let newHeight = Number(info?.height)??0

        // 如果宽高都大于0 就按比例缩放
        if (newWidth > 0 && newHeight > 0) {
          const maximum = Math.max(newWidth, newHeight)
          const scale = num / maximum 
          newWidth = Math.round(newWidth * scale )
          newHeight = Math.round(newHeight * scale )
        }

    logoData.value[0].width = newWidth || info?.width;
    logoData.value[0].height = newHeight || info?.height;



    LogoPhoneRef.value?.initData({
      width: logoData.value[0].width,
      height: logoData.value[0].height
    })
  }


  state.addVisible = false;
};
    
  // 清空选择的图片
  const clear = () => {
      logoData.value[0].media_id = ''
      logoData.value[0].url = ''
    };

  // 确定添加logo
const submit = () => {

  // x, y 宽高等数据
  const data = LogoPhoneRef.value?.giveData()

  // 替换 宽高 x y 等数据
    store.commit("videoMixCut/SET_LOGO_DATA", {
      logoData: {
        ...logoData.value[0],
        ...data
      },
    });
    
  onClose()
  
}

    // 打开弹窗
const showDrawer = () => {
  const material_urls = store.state.videoMixCut.VideoMashup?.global_logo_config?.logo_urls?.[0]
    Object.assign(logoData.value[0], material_urls)
  console.log(material_urls, '即将合并的参数');
    console.log(logoData.value,'logo参数');
  state.visible = true;
  state.phoneVisible = true

  nextTick(() => {
    LogoPhoneRef.value?.useBgc()
    LogoPhoneRef.value?.initData(logoData.value[0])
  });
};
    // 关闭弹窗
    const onClose = () => {
      state.visible = false;
    };
    defineExpose({
      showDrawer,
      onClose
    })

</script>

<template>
  <a-drawer v-model:visible="state.visible" class="custom-class" title="全局水印LOGO" placement="right" width="400"
    :maskClosable="false">
        <p style="color: rgb(115, 122, 135)">
          请选择想要添加的水印LOGO
        </p>
        <div class="colorList">
          <div class="color-item-upload" v-if="!logoData[0]?.url">
            <div class="color-item-upload-add">
              <span>+</span>
            </div>
            <div class="color-item-uploadOpreat">
              <span class="color-item-upload-top" @click="state.addVisible = true"><upload-outlined />素材库导入</span>
            </div>
          </div>
          <div class="color-item" v-else>
            <img style="height: 100%;width: 100%;object-fit: contain" v-lazy="logoData[0]?.url" alt="" />
            <div class="close" @click="clear">
              <close-outlined />
            </div>
          </div>
        </div>

        <div class="logo_configs">
          <div class="logo_configs_item">
            <div class="logo_configs_item_title">持续时长: </div>
            <a-input-number style="width: 130px;" :precision="4" v-model:value="logoData[0].duration" :min="0" :max="999999" />
          </div>
          <div class="logo_configs_item">
            <!-- <QuestionCircleOutlined class="question"/> -->
            <div class="logo_configs_item_title">透明度:   </div>
            <a-slider class="input_content" :marks="state.marks" v-model:value="logoData[0].opacity" :step="0.1"  :max="1" :min="0">
              <template #mark="{ label, point }">
                <template v-if="point === 100">
                  <strong>{{ label }}</strong>
                </template>
                <template v-else>{{ label }}</template>
              </template>
            </a-slider>
          </div>
        </div>

          <!-- 手机组件 -->
        <LogoPhone ref="LogoPhoneRef" 
        :phoneVisible="state.phoneVisible"
        :visible="state.visible"
        :logoData="logoData[0]"
        > </LogoPhone>
    <template #footer>
      <a-row type="flex" justify="end">
        <a-button style="margin-right: 8px" type="primary" @click="submit">确认添加</a-button>
        <a-button @click="onClose">取消</a-button>
      </a-row>
    </template>
    <!-- 素材库导入 -->
    <ChooseMaterial :haveTags="[
      {
        name: '网络素材',
        key: 'system_materials',
      }
    ]" useType="视频背景" 
    :isClip="false" material_type="image" 
    :visible="state.addVisible" @close="cancel" 
    :multiple="false" />
  </a-drawer>
</template>

<style lang="less" scoped>
.cube {
  width: 30px;
  height: 30px;
  border-radius: 5px;
  position: relative;
}

.colorList {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  max-height: 600px;
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 8px;
    /* 滚动条的宽度 */
    height: 10px;
    /* 滚动条的高度，垂直滚动条可能用得上 */
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    background: #888;
    /* 滑块的背景颜色 */
    border-radius: 10px;
    /* 滑块的圆角 */

  }
}

.color-item,
.color-item-upload {
  cursor: pointer;
  height: 100px;
  margin-top: 10px;
  background: #f7f7f7;
  border: 1px solid #e6e6e7;
  border-radius: 5px;

  .check_btn {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.color-item-upload {
  background: #f7f7f7;

  .color-item-upload-add {
    width: 100%;
    font-size: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .color-item-uploadOpreat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    height: 100%;
    visibility: hidden;
    cursor: pointer;

    .color-item-upload-top,
    .color-item-upload-bottom {
      display: flex;
      height: 49%;
      align-items: center;
      justify-content: center;
    }

    .color-item-upload-top:hover,
    .color-item-upload-bottom:hover {
      color: #2878ff;
    }

    .color-item-upload-middle {
      height: 1px;
      width: 80%;
      background: #e6e6e7;
    }
  }
}

.color-item-upload:hover .color-item-uploadOpreat {
  visibility: visible;
}

.color-item-upload:hover .color-item-upload-add {
  display: none;
}

.color-item {
  position: relative;
}

.close {
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  right: 0;
  top: 0;
  font-size: 10px;
  border-radius: 10px;
  border: 1px solid #c1c1c1;
  background: #fff;
  visibility: hidden;
}

.color-item:hover .close {
  visibility: visible;
}

.colorPicker {
  background: skyblue;
}


// 表单box
.logo_configs{
  display: flex;
  flex-direction: column;
  margin-top: 20px;

  gap: 20px;

  .logo_configs_item{
    display: flex;
    align-items: center;
    gap: 20px;

  .logo_configs_item_title{
    font-size: 14px;
    color: #333;
    margin-bottom: 3px;

    .question{

    }
  }
  .input_content{
    flex: 1;
  }

  }

}

</style>
